<template>
  <section class="team-tab">
    <div class="container">
        <div class="tab-content">
            <div class="tab-pane show active  animated fadeInUp" role="tabpanel" id="overview">
                <div class="row">
                    <div class="col-lg-6 d-flex">
                        <div class="my-auto">
                            <div class="team-tab__content">
                                <div class="team-tab__top">
                                    <div class="team-tab__left">
                                        <h2 class="team-tab__title">Christine Eve </h2><!-- /.team-tab__title -->
                                        <p class="team-tab__designation">Language Expert</p>
                                        <!-- /.team-tab__designation -->
                                    </div><!-- /.team-tab__left -->
                                    <div class="team-tab__right">
                                        <div class="team-tab__social">
                                            <a href="#"><i class="fab fa-twitter"></i></a>
                                            <a href="#"><i class="fab fa-facebook-square"></i></a>
                                            <a href="#"><i class="fab fa-pinterest-p"></i></a>
                                            <a href="#"><i class="fab fa-instagram"></i></a>
                                        </div><!-- /.team-tab__social -->
                                    </div><!-- /.team-tab__right -->
                                </div><!-- /.team-tab__top -->
                                <p class="team-tab__text">There cursus massa at urnaaculis estie. Sed aliquamellus vitae
                                    ultrs condmentum leo massa mollis estiegittis miristum nulla sed medy fringilla
                                    vitae.
                                </p><!-- /.team-tab__text -->
                                <div class="progress-one__wrap">
                                    <div class="progress-one__single">
                                        <div class="progress-one__top">
                                            <h3 class="progress-one__title">English</h3><!-- /.progress-one__title -->
                                            <h3 class="progress-one__percent"><span class="counter">98</span>
                                                <!-- /.counter -->%
                                            </h3><!-- /.progress-one__percent -->
                                        </div><!-- /.progress-one__top -->
                                        <div class="progress-one__bar">
                                            <span style="width: 98%;" class="wow slideInLeft"></span>
                                        </div><!-- /.progress-one__bar -->
                                    </div><!-- /.progress-one__single -->
                                    <div class="progress-one__single">
                                        <div class="progress-one__top">
                                            <h3 class="progress-one__title">French</h3><!-- /.progress-one__title -->
                                            <h3 class="progress-one__percent"><span class="counter">64</span>
                                                <!-- /.counter -->%
                                            </h3><!-- /.progress-one__percent -->
                                        </div><!-- /.progress-one__top -->
                                        <div class="progress-one__bar">
                                            <span style="width: 64%;" class="wow slideInLeft"></span>
                                        </div><!-- /.progress-one__bar -->
                                    </div><!-- /.progress-one__single -->
                                    <div class="progress-one__single">
                                        <div class="progress-one__top">
                                            <h3 class="progress-one__title">Spanish</h3><!-- /.progress-one__title -->
                                            <h3 class="progress-one__percent"><span class="counter">34</span>
                                                <!-- /.counter -->%
                                            </h3><!-- /.progress-one__percent -->
                                        </div><!-- /.progress-one__top -->
                                        <div class="progress-one__bar">
                                            <span style="width: 34%;" class="wow slideInLeft"></span>
                                        </div><!-- /.progress-one__bar -->
                                    </div><!-- /.progress-one__single -->
                                </div><!-- /.progress-one__wrap -->

                                <a href="#" class="thm-btn team-tab__btn">Learn More</a><!-- /.thm-btn -->
                            </div><!-- /.team-tab__content -->
                        </div><!-- /.my-auto -->
                    </div><!-- /.col-lg-6 -->
                    <div class="col-lg-6">
                        <img src="/assets/images/teacher-h3-1-1.jpg" alt="">
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
            </div><!-- /.course-details__tab-content -->
            <div class="tab-pane  animated fadeInUp" role="tabpanel" id="curriculum">
                <div class="row">
                    <div class="col-lg-6 d-flex">
                        <div class="my-auto">
                            <div class="team-tab__content">
                                <div class="team-tab__top">
                                    <div class="team-tab__left">
                                        <h2 class="team-tab__title">Catherine Hopkins</h2><!-- /.team-tab__title -->
                                        <p class="team-tab__designation">Language Expert</p>
                                        <!-- /.team-tab__designation -->
                                    </div><!-- /.team-tab__left -->
                                    <div class="team-tab__right">
                                        <div class="team-tab__social">
                                            <a href="#"><i class="fab fa-twitter"></i></a>
                                            <a href="#"><i class="fab fa-facebook-square"></i></a>
                                            <a href="#"><i class="fab fa-pinterest-p"></i></a>
                                            <a href="#"><i class="fab fa-instagram"></i></a>
                                        </div><!-- /.team-tab__social -->
                                    </div><!-- /.team-tab__right -->
                                </div><!-- /.team-tab__top -->
                                <p class="team-tab__text">There cursus massa at urnaaculis estie. Sed aliquamellus vitae
                                    ultrs condmentum leo massa mollis estiegittis miristum nulla sed medy fringilla
                                    vitae.
                                </p><!-- /.team-tab__text -->
                                <div class="progress-one__wrap">
                                    <div class="progress-one__single">
                                        <div class="progress-one__top">
                                            <h3 class="progress-one__title">English</h3><!-- /.progress-one__title -->
                                            <h3 class="progress-one__percent"><span class="counter">98</span>
                                                <!-- /.counter -->%
                                            </h3><!-- /.progress-one__percent -->
                                        </div><!-- /.progress-one__top -->
                                        <div class="progress-one__bar">
                                            <span style="width: 98%;" class="wow slideInLeft"></span>
                                        </div><!-- /.progress-one__bar -->
                                    </div><!-- /.progress-one__single -->
                                    <div class="progress-one__single">
                                        <div class="progress-one__top">
                                            <h3 class="progress-one__title">French</h3><!-- /.progress-one__title -->
                                            <h3 class="progress-one__percent"><span class="counter">64</span>
                                                <!-- /.counter -->%
                                            </h3><!-- /.progress-one__percent -->
                                        </div><!-- /.progress-one__top -->
                                        <div class="progress-one__bar">
                                            <span style="width: 64%;" class="wow slideInLeft"></span>
                                        </div><!-- /.progress-one__bar -->
                                    </div><!-- /.progress-one__single -->
                                    <div class="progress-one__single">
                                        <div class="progress-one__top">
                                            <h3 class="progress-one__title">Spanish</h3><!-- /.progress-one__title -->
                                            <h3 class="progress-one__percent"><span class="counter">34</span>
                                                <!-- /.counter -->%
                                            </h3><!-- /.progress-one__percent -->
                                        </div><!-- /.progress-one__top -->
                                        <div class="progress-one__bar">
                                            <span style="width: 34%;" class="wow slideInLeft"></span>
                                        </div><!-- /.progress-one__bar -->
                                    </div><!-- /.progress-one__single -->
                                </div><!-- /.progress-one__wrap -->

                                <a href="#" class="thm-btn team-tab__btn">Learn More</a><!-- /.thm-btn -->
                            </div><!-- /.team-tab__content -->
                        </div><!-- /.my-auto -->
                    </div><!-- /.col-lg-6 -->
                    <div class="col-lg-6">
                        <img src="/assets/images/teacher-h3-1-2.jpg" alt="">
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
            </div><!-- /.course-details__tab-content -->
        </div><!-- /.tab-content -->
        <ul class="team-tab__tab-navs list-unstyled nav nav-tabs" role="tablist">
            <li>
                <a class="active" role="tab" data-toggle="tab" href="#overview">
                    <img src="/assets/images/team-1-1.jpg" alt="">
                </a>
            </li>
            <li>
                <a class="" role="tab" data-toggle="tab" href="#curriculum"><img src="/assets/images/team-1-2.jpg" alt=""></a>
            </li>
        </ul><!-- /.course-details__tab-navs list-unstyled -->
    </div><!-- /.container -->
</section>
</template>

<script>
    export default {
        name: "TeamTab"
    }
</script>

<style scoped>

</style>
